<template>
  <div ref="charts" class="charts" />
</template>

<script>
import * as echarts from 'echarts'
import resize from '@/mixins/resize'

export default {
  name: 'PieChart',
  mixins: [resize],
  mounted() {
    const myEcharts = echarts.init(this.$refs.charts)
    myEcharts.setOption({
      title: {
        text: '家用电器',
        textStyle: {
          fontSize: 14
        },
        subtext: 312,
        subtextStyle: {
          fontSize: 30
        },
        left: 'center',
        top: '43%'
      },
      series: [
        {
          type: 'pie',
          data: [
            {
              name: '家用电器',
              value: 312
            },
            {
              name: '食用酒水',
              value: 336
            },
            {
              name: '个护健康',
              value: 342
            },
            {
              name: '服饰箱包',
              value: 97
            },
            {
              name: '母婴产品',
              value: 188
            },
            {
              name: '其他',
              value: 94
            }
          ],
          // 半径
          radius: ['40%', '70%'],
          itemStyle: {
            // 数字比例之间的间隔距离和颜色
            borderWidth: 2,
            borderColor: '#fff'
          },
          label: {
            // 显示占用比例数字
            formatter: '{b}: {c}'
          }
        }
      ]
    })
    this.myEcharts = myEcharts

    // 设置鼠标移动上去显示效果，高频率触发
    myEcharts.on('mouseover', function(params) {
      const { name, value } = params.data

      myEcharts.setOption({
        title: {
          text: name,
          subtext: value
        }
      })
    })
  }
}
</script>

<style lang="scss" scoped>
.charts {
  width: 100%;
  height: 100%;
}
</style>
